Quick Start

Create a Chart User Interface

Chart user interfaces enable users to control and interact with charts. ChartIQ provides a large assorment of W3C-standard web components and custom tags that enable you to quickly create full-featured chart user interfaces with toolbars, menus, dialogs, titles, legends, and more.

In this tutorial

You will create a basic user interface for a chart.

Before you begin

This tutorial is a continuation of the Quick Start Connect a Chart to a Live Data Source tutorial. Please complete the data source tutorial before proceeding.

Web components

ChartIQ is both a web component framework and a JavaScript library, providing everything you need to create a chart user interface.

ChartIQ web components, identified by the "cq-" prefix, are custom HTML elements with built-in functionality. Our sample templates utilize these components, offering dynamic features and customization through various attributes.

Additionally, ChartIQ web components are styled with CSS classes that typically begin with "ciq-". For example, classes like ciq-menu and ciq-radio.

For more information on using ChartIQ web components, visit the Web Components Tutorial.

Create the UI

Open helloworld.html (the revised version you created in the preceding tutorial) in your code editor.

First, we'll add the markup for the UI.

<cq-context>

Surround the <div> element that contains the chart with the following tags:

<cq-context></cq-context>

For example:

<cq-context>
    <div class="chartContainer" style="width:800px;height:460px;position:relative;"></div>
</cq-context>

The cq-context element establishes an area of the markup (a context) for the chart and the UI web components associated with the chart. A web page can contain multiple charts, in which case multiple contexts are created. We'll create only one chart in helloworld.html, but a context is still needed for that chart.

Navigation bar

Next, let's create a navigation bar. Add the following <div> tag above the chart container <div>:

<div class="ciq-nav">
</div>

For example:

<cq-context>
    <div class="ciq-nav">
    </div>
    <div class="chartContainer" style="width:800px;height:460px;position:relative;"></div>
</cq-context>

The div element sets up a navigation bar that will hold our UI elements.

The ciq-nav style is defined in the chartiq.css file (along with many other styles for the web components).

To ensure proper styling and functionality of web components, we also need to include the webcomponents.css file.

Include chartiq.css and webcomponents.css in helloworld.html by adding the the following link elements:

<link rel="stylesheet" type="text/css" href="css/chartiq.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/webcomponents.css" media="screen" />

Note: chartiq.css must follow stx-chart.css in the CSS cascade; so, add the link for chartiq.css after the link for stx-chart.css.

<cq-menu class="ciq-menu">
  <span>Chart Styles</span>
  <cq-dropdown style="">
    <ul class="content">
      <li stxsetget="Layout.ChartType('candle')" class="ciq-active">Candle
        <span class="ciq-radio"><span></span></span>
      </li>
      <li stxsetget="Layout.ChartType('line')">Line
        <span class="ciq-radio"><span></span></span>
      </li>
      <li stxsetget="Layout.ChartType('step')">Step
        <span class="ciq-radio"><span></span></span>
      </li>
      <li stxsetget="Layout.ChartType('mountain')">Mountain
        <span class="ciq-radio"><span></span></span>
      </li>
      <li stxsetget="Layout.ChartType('baseline_delta')">Baseline
        <span class="ciq-radio"><span></span></span>
      </li>
      <li stxsetget="Layout.ChartType('histogram')">Histogram
        <span class="ciq-radio"><span></span></span>
      </li>
    </ul>
  </cq-dropdown>
</cq-menu>

Let's look at the markup elements.

<cq-menu>

A ChartIQ web component that creates a menu.

<span>Chart Style</span>

A standard HTML element that provides the title of the menu.

<cq-dropdown>

A ChartIQ web component that creates a drop-down menu.

<ul>

A standard HTML element that defines an unordered list, used to group together related items in the menu.

<li>

A standard HTML element that represents an individual item within an unordered list, used to specify each option in the menu. Each li tag contains the text of the menu item (such as “Candle”) and a span element styled as a radio button by the ciq-radio CSS class (in chartiq.css).

The menu is a list of radio button items. The currently selected item is identified by class="ciq-active".

Each menu item has a stxsetget attribute, which is a ChartIQ custom event handler (like onclick). When a menu item is selected, the Layout.ChartType function for that element is called.

Activate the UI components

If you run helloworld.html at this point, the navigation bar and Chart Styles menu will appear above the chart, but the menu won't work. That's because your browser doesn't recognize the ChartIQ web components.

We have to activate the components with some JavaScript.

CIQ

To enable the UI, we need a version of the CIQ namespace that has enhanced, UI-specific functionality.

Revise the following line in helloworld.html:

import { CIQ } from "./js/chartiq.js";

to:

import { CIQ } from "./js/components.js";

CIQ now includes the UI namespace, which has all the functionality needed to manage the chart UI web components.

Component registration

Now we can make the ChartIQ web components known to the browser.

Add the following JavaScript statement to the script:

CIQ.UI.registerComponents();

Add the statement after the line that attaches the quote feed to the chart engine, for example:

stxx.attachQuoteFeed(quoteFeed, { refreshInterval: 1 });
CIQ.UI.registerComponents();

The registerComponents function uses the customElements.define function of the Web API to turn the ChartIQ web components into legitimate HTML elements.

Context object

Next, we'll create a context object and give it a reference to the chart engine. The web components in the context (our menu, for example) will then be able to control the chart.

Add the following after the statement that registers the components:

const uiContext = new CIQ.UI.Context(stxx, document.querySelector("cq-context"));

Layout object

We need a layout object to provide the Layout.ChartType event handler for our menu items (see Menu above). The layout object works only in the context specified by the constructor function parameter, so we'll give it a reference to our context object.

Add the following after the statement that creates the UI context:

new CIQ.UI.Layout(uiContext);

Bindings

Finally, we have to activate the stxsetget bindings of the menu items.

Add the following statement to make the UI interactive:

CIQ.UI.begin();

Add the statement after the line that instantiates CIQ.UI.Layout.

Completed file

Here's the completed version of helloworld.html:

<!doctype html>
<!--
This file provides an example of the most basic way to load a chart into an HTML page.
-->
<html>
<head>
<!-- Set the display for mobile devices. -->
<meta name="viewport" content="width=device-width" />

<!-- Reference the style sheets. -->
<link rel="stylesheet" type="text/css" href="css/stx-chart.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/chartiq.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/webcomponents.css" media="screen">
</head>

<body>

<!-- Create the chart container and user interface. -->
<cq-context>
  <div class="ciq-nav">
    <cq-menu class="ciq-menu">
      <span>Chart Styles</span>
      <cq-dropdown style="">
        <ul class="content">
          <li stxsetget="Layout.ChartType('candle')" class="ciq-active">Candle
            <span class="ciq-radio"><span></span></span>
          </li>
          <li stxsetget="Layout.ChartType('line')">Line
            <span class="ciq-radio"><span></span></span>
          </li>
          <li stxsetget="Layout.ChartType('step')">Step
            <span class="ciq-radio"><span></span></span>
          </li>
          <li stxsetget="Layout.ChartType('mountain')">Mountain
            <span class="ciq-radio"><span></span></span>
          </li>
          <li stxsetget="Layout.ChartType('baseline_delta')">Baseline
            <span class="ciq-radio"><span></span></span>
          </li>
          <li stxsetget="Layout.ChartType('histogram')">Histogram
            <span class="ciq-radio"><span></span></span>
          </li>
        </ul>
      </cq-dropdown>
    </cq-menu>
  </div>
  <div class="chartContainer" style="width:800px;height:460px;position:relative;"></div>
</cq-context>

<!-- This inline script acts as the entry point, without creating a separate external file. -->
<script type="module" crossorigin="use-credentials">

// Reference a quote feed.
import quoteFeed from "./examples/feeds/sampleQuoteFeed.js";

// Reference functionality of the charting library.
import "./js/standard.js";
import { CIQ } from "./js/components.js";

// Activate the License Key
import getLicenseKey from "./key.js";
getLicenseKey(CIQ);

// Instantiate a CIQ.ChartEngine object, the main object for creating charts.
let stxx = new CIQ.ChartEngine({
    container: document.querySelector(".chartContainer")
});

// Make real-time data available to the chart.
stxx.attachQuoteFeed(quoteFeed, { refreshInterval: 1 });

// Activate the UI.
CIQ.UI.registerComponents();
const uiContext = new CIQ.UI.Context(stxx, document.querySelector("cq-context"));
new CIQ.UI.Layout(uiContext);
CIQ.UI.begin();

// Display the chart.
stxx.loadChart("SPY", {
    periodicity: {
        period: 1,
        interval: 5,
        timeUnit: "minute"
    }
});

</script>

</body>
</html>

Load helloworld.html. The Chart Styles menu should enable you to change the way the chart displays the data.

Conclusion

The ChartIQ web component framework enables you to build full-featured user interfaces for your charts. Take a look at technical‑analysis‑chart.html (in the chartiq folder of your library) to see a great example.

But you can also create a UI in React, Angular, Vue, iOS, Android, Java — whatever framework or development tool you choose.

Next steps

This guide has provided a brief introduction to the ChartIQ library. But there's much more to discover. Explore our documentation site to access a variety of in-depth tutorials and the complete API documentation.

Let us know at support@chartiq.com if you have any questions.